*{margin: 0;padding: 0;}
a{text-decoration: none;}
li{list-style: none;}
body{font-size: 62.5%;font-family: "微软雅黑";}
.alert{width: 100%;height: 3rem;background: #ccc;position: fixed;display:none;text-align: center;
    color: #f00;line-height: 3rem;font-size:1.2rem;}
header{width: 100%;height: 3rem;background:#13303e;}
article{width: 90%;height: 100%;background: #fff;margin: 0 auto;}
article h4{text-align: center;font-size:1.5rem;line-height: 3rem;padding-top: 0.8rem;color: #b60a14;}
article p{width: 100%;font-size: 1rem;margin-top: 0.5rem;}
.pic{width: 100%;height: 10rem;}
.text{width: 50%;height: 10rem;float:left;}
.text a{color: #b60a14;font-size: 1rem;}
.text h5{color: #b60a14;font-size: 1rem;font-weight: normal;margin-top: 2rem;}
.text p{margin-top: 0.2rem;font-size: 0.9rem;}
.text h3{font-size: 0.9rem;font-weight: normal;line-height: 3rem;}
.text h6{font-size: 0.9rem;font-weight: normal;}
.images{width: 50%;height: 12rem;background: #fff;float: left;font-size: 1rem;}
.group{width: 90%;height: 100%; margin: 0 auto;}
.group_count{clear: both;border-bottom: 1px dashed #f00;width: 100%;height:100%;
    margin: 0 auto;border-top: 1px dashed #f00;}
.group_count ul{width: 90%;height:100%;margin: 0 auto;}
.group_count ul li{width: 5rem;height: 5rem;border-radius: 50%;background: #ccc;float: left;
    position: relative;margin: 0.2rem 0.3rem;}
.group_count ul li em{position: absolute;left:3rem;top:0.2rem;display:block;width: 3rem;color: #fff;
    text-align: center;height: 1.6rem;border-radius: 0.8rem;background: #e8c57a;
    line-height: 1.6rem;z-index: 9;font-style: normal;}
.group_count ul li b{position: absolute;left:3rem;top:0.2rem;display:block;width: 3rem;color: #fff;
    text-align: center;height: 1.6rem;border-radius: 0.8rem;background: #e2223b;
    line-height: 1.6rem;z-index: 9;font-weight: normal;}
.group_count span{clear: both;display: inline-block;width: 100%;height: 1rem;text-align: center;
    font-size: 0.8rem;padding: 0.5rem;}
.group_message{width: 100%;height:100%;}
.group_message em{font-style: normal;line-height: 1.5rem;position: relative;}
.group_message em img{width: 1.5rem;height: 1.5rem;border-radius: 50%;background:#ccc;position: absolute;
    top: 0;border: none;}
.group_message em b{margin-left: 2rem;}

footer{width: 100%;height: 2rem;margin-top: 3rem;text-align: center;background: #f2f2f2;}
footer a{margin-left: 5%;float: left;line-height: 2rem;color: #fff;}
footer a:nth-child(1){width: 40%;height: 2rem;background: #4880a1;}
footer a:nth-child(2){width: 20%;height: 2rem;background: #e61b52;}
footer a:nth-child(3){width: 20%;height: 2rem;background: #e61b52;}

@media screen and (max-width: 320px){
    .group_count{clear: both;border-bottom: 1px dashed #f00;width: 100%;height: 12rem;
        margin: 0 auto;border-top: 1px dashed #f00;}
    .group_count ul{width: 90%;height: 10rem;margin: 0 auto;}
    .group_count ul li{width: 4rem;height: 4rem;border-radius: 50%;background: #ccc;float: left;
        position: relative;margin: 0.4rem 0.4rem;}
    .text h6{font-size: 0.7rem;font-weight: normal;}
    .group_count ul li em{position: absolute;left:2rem;top:0.2rem;display:block;width: 3rem;color: #fff;
        height: 1.6rem;border-radius: 0.8rem;background: #e8c57a;line-height: 1.6rem;z-index: 9;}
    .group_count ul li b{position: absolute;left:2rem;top:0.2rem;display:block;width: 3rem;color: #fff;
        text-align: center;height: 1.6rem;border-radius: 0.8rem;background: #e2223b;
        line-height: 1.6rem;z-index: 9;font-weight: normal;}
}

.join{display: none;width: 100%;height: 100%;}
.j-head{width: 100%;height: 3rem;background: #13303e;font-size: 1rem;}
.j-head b{font-size:2.5rem;line-height:3rem;margin-left:2%;font-weight:normal;color:#fff;float:left;width: 10%;}
.j-head span{float: left;line-height: 3rem;width: 78%;text-align: center;font-size: 1.4rem;color: #ffffff;}
.j-info{width: 90%;margin: 2rem auto;}
.j-info label input{width: 100%;height: 2rem;margin: 0.25rem auto;border: none;text-indent: 0.5rem;
    border-bottom: 1px dashed #8fb0c4;border-top: 1px dashed #8fb0c4;background: #f2f2f2;}
.j-info dl{width: 100%;margin: 1rem auto 5rem;height: 2rem;background: #ccc;}
.j-foot{width: 100%;height: 3rem;position: relative;bottom: 0;}
.j-foot span{float: left;width: 60%;height: 3rem;background: #ccc;}
.j-foot em{float: left;font-style: normal;width: 40%;height: 3rem;background: #e61b52;text-align: center;
    line-height: 3rem;font-size: 1rem;color: #fff;}

.open{display: none;width: 100%;height: 100%;}
.o-head{width: 100%;height: 3rem;background: #13303e;}
.o-head b{font-size:2.5rem;line-height:3rem;margin-left:2%;font-weight:normal;color:#fff;float:left;width: 10%;}
.o-head span{float: left;line-height: 3rem;width: 78%;text-align: center;font-size: 1.4rem;color: #ffffff;}
.o-info{width: 90%;margin: 2rem auto;}
.o-info label input{width: 100%;height: 2rem;margin: 0.25rem auto;border: none;text-indent: 0.5rem;
    border-bottom: 1px dashed #8fb0c4;border-top: 1px dashed #8fb0c4;background: #f2f2f2;}
.o-info dl{width: 100%;margin: 1rem auto 5rem;height: 100%;background: #ccc;}
.o-info dl dt{width: 100%;height: 2rem;background: #f2f2f2;line-height: 2rem;}
.o-info dl dd{display: none;width: 100%;height: 2rem;background: #f2f2f2;}
.o-foot{width: 100%;height: 3rem;position: relative;bottom: 0;}
.o-foot span{float: left;width: 60%;height: 3rem;background: #ccc;}
.o-foot em{float: left;font-style: normal;width: 40%;height: 3rem;background: #e61b52;text-align: center;
    line-height: 3rem;font-size: 1rem;color: #fff;}